<!--
 * @Description: 
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2023-03-24 16:32:45
 * @LastEditTime: 2023-03-31 16:23:37
-->
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Card from './Card/index.vue';
import Message from '@/helper/Message'
import Loading from '@/helper/Loading'
import Chart, { ECOption } from './Chart.vue';
// import Btn from './Btn.vue';
// import Legend from './Legend.vue'
import DateSelect from './DateSelect.vue'
// Loading.show()
defineProps<{ msg: string }>()
// Message({ content: '测试内容', showClose: true }, 0)
// Message.error('未知错误！', 0)
// Message.warning('警告消息！', 0)
// Message.success('加载成功！', 0)
// Message.info('消息提示！', 0)
const count = ref(0)
const domsg = () => {
  // Message.success('加载成功！')
  options.title = { text: "123" }
  // pieLoading.value = true
}
const pieLoading = ref(false)
const options: ECOption = reactive({
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

const bindClick = (e: any) => {
  console.log("121213", e)
}
</script>

<template>
  <h1 @click="domsg">{{ msg }}</h1>
  <!-- <Card :show-tab="true" /> -->
  <!-- <Card /> -->
  <!-- <Btn @click="bindClick">按钮</Btn> -->
  <DateSelect :date-type="5" sel-val="2020-03-20 12:00" :width="200" :height="40" placeholder="12313213" border="1px solid #000"
    color="#000" background="#fff" @change="bindClick"></DateSelect>
  <!-- <Legend/> -->
  <!-- <div style="width:500px;height:300px;">
                      <chart :option="options" :loading="pieLoading" />
                    </div> -->

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
    starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
